<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <title> goodsTypeTree </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <base href="http://localhost/shop-resources/back/">

    <!--引入zTree css文件-->
<!--    <link rel="stylesheet" href="lib/zTree/v3/css/demo.css" type="text/css">-->
    <link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">

    <!--引入zTree js文件-->
    <script type="text/javascript" src="lib/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.js"></script>

    <!--引入自定义js文件-->
    <script type="text/javascript" src="lib/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.js"></script>
    <script type="text/javascript" src="js/AjaxUtil.js"></script>
    <script type="text/javascript" src="js/JsonUtils.js"></script>
    <script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
    <script type="text/javascript" src="js/H-ui.js"></script>
    <script type="text/javascript" src="js/H-ui.admin.js"></script>

    <!--zTree 自定义渲染文件-->
    <script LANGUAGE="JavaScript">
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            edit: {
                //鼠标移动到节点上方,显示辅助信息
                enable: true,
                showRemoveBtn: true, //是否显示移除按钮
                showRenameBtn: true,
                removeTitle: "删除节点",
                renameTitle: "编辑节点名称",
                drag: {
                    prev: true,
                    next: true,
                    inner: true
                }
            },
            callback: {
                onRemove: zTreeOnRemove,
                onRename: zTreeOnRename,
                onDrop: zTreeOnDrop // 拖拽事件
            },
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom
            }
        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = null;

        //页面初始化时调用
        $(document).ready(function(){

            //发送异步请求查询商品类型数据
            get("shop-back/goodsTypeController/getGoodsTypeTree",function (resp) {
               // com/yx/common/R.java 返回的json数据对象
               console.info(resp.data);
                //将简单json转换为标准json
                zNodes = format(resp.data);
                //初始化树型节点
                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            });
        });

        // 修改节点名称回调函数
        function zTreeOnRename(event, treeId, treeNode, isCancel) {
            console.info("rename , " + treeNode.name);
            var param = new Object();
            param.id = treeNode.id;
            param.goodsTypeName = treeNode.name;
            send("shop-back/goodsTypeController/updateGoodsType",param,function (resp){
                console.info(resp);
            });
        };

        // 移除节点回调函数
        function zTreeOnRemove(event, treeId, treeNode) {
            console.info("remove , " + treeNode.name);
            get("shop-back/goodsTypeController/deleteGoodsType/"+treeNode.id,function (resp) {
                console.info(resp);
            });
        };

        // 拖拽函数
        function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
            console.info(treeNodes[0].name+",拖拽到了:"+targetNode.name);
            console.info(treeNodes[0].id+"===>"+targetNode.id);
            var pid = targetNode.id;
            var id = treeNodes[0].id;
            get("shop-back/goodsTypeController/updateGoodsTypePid/"+pid+"/"+id,function (resp) {
                console.info(resp);
            })
            // udpate set pid = targetNode.id where id =treeNodes[0].id
        };

        // 增加
        function addHoverDom(treeId, treeNode) {
            var aObj = $("#" + treeNode.tId + "_a");
            if ($("#diyBtn_"+treeNode.id).length>0) return;
            var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' > </span>"
                + "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.id
                + "' title='"+treeNode.name+"' onfocus='this.blur();'>add</button>";
            aObj.append(editStr);
            var btn = $("#diyBtn_"+treeNode.id);
            //点击按钮触发
            if (btn) btn.bind("click", function() {
                console.info("addNode " + treeNode.name);
                var url = "http://localhost/shop-back/goodsTypeController/addGoodsType/" + treeNode.id;
                layer_show("添加商品类别", url, 250, 200);
            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#diyBtn_"+treeNode.id).unbind().remove();
            $("#diyBtn_space_" +treeNode.id).unbind().remove();
        };


    </script>
</head>
<body>
<div>
    <ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>